<template>

    <button :disabled="sending" type="default" :loading="loading" class="btn" @click="btn">{{
        getCode
    }}</button>

</template>

<script>
import { get_sendSms } from "../../api/api"

export default {
    data() {
        return {
            sending: false,
            loading: false,
            getCode: '获取验证'
        }
    },
    props: ['name'],

    methods: {
        //发送验证
        btn() {
            let { name } = this
            console.log(name)
            console.log(this.name)
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(name)) {
                // this.$toast('手机号码格式错误');
                console.log(name)
                console.log("手机号码格式错误")
                return;
            }

            get_sendSms({
                mobile: name,
                type: "register"
            }).then(res => {
                console.log(res)
                if (res.code == 0) {
                    this.sending = true
                    this.loading = true
                    let time = 60;
                    let timer = null;
                    this.getCode = time + "s后重新获取"
                    console.log("验证码发送成功")
                    timer = setInterval(() => {
                        // console.log("11")
                        time--;

                        console.log(this.getCode)
                        if (time <= 0) {
                            // console.log("0000")
                            this.sending = false
                            this.loading = false
                            this.getCode = "重新获取",
                                time = 60;
                            clearInterval(timer);
                            timer = null;
                        } else {
                            console.log(time)
                            console.log(this.getCode)
                            this.getCode = time + "s后重新获取"
                        }
                    }, 1000)
                } else {
                    this.sending = false
                    console.log("账号已存在")
                }

            })

        }
    },
}
</script>

<style lang="scss" scoped>
.btn {
    width: 40%;
    font-size: 10px;
    background-color: #fdda33;
}
</style>